
<template>
  <div class="repairBox">
    <div class="container">
      <div class="breadBox">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/repairList' }">我的报事报修</el-breadcrumb-item>
          <el-breadcrumb-item>新增报事报修</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="formBox">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">

          <el-form-item label="故障类型" prop="serviceType">
            <el-select v-model="ruleForm.serviceType" placeholder="请选择故障类型">
              <el-option v-for="(item,index) in typeList" :key="index" :label="item.dictName" :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域" prop="serviceRange">
            <el-select v-model="ruleForm.serviceRange" placeholder="请选择活动区域">
              <el-option v-for="(item,index) in areaList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房屋编号" prop="projectId" v-if="ruleForm.serviceRange=='1'">
            <el-select v-model="ruleForm.projectId" placeholder="请选择房屋编号">
              <el-option v-for="(item,index) in houseList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="故障设备" prop="relateDeviceType">
            <el-select v-model="ruleForm.relateDeviceType" placeholder="请选择故障设备" @change="handleDeviceChanged">
              <el-option v-for="(item,index) in deviceList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预估价格" prop="serviceFee" v-if="ruleForm.serviceRange=='1'">
            <el-input v-model="ruleForm.serviceFee" placeholder="请先选择故障设备" disabled></el-input>
          </el-form-item>
          <el-form-item label="内容描述" prop="serviceDescription">
            <el-input type="textarea" v-model="ruleForm.serviceDescription"></el-input>
          </el-form-item>
          <el-form-item label="上传图片">
            <el-upload
                action=""
                multiple
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :http-request="handleChanged"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog v-model="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import api from "../../../api/app";

export default {
  data() {
    return {
      typeList:[{dictValue:1,dictName:'报事'},{dictValue:2,dictName:'保修'}],
      areaList:[],
      houseList:[{label: "399号附13号", value: 3421},{label: "399号附14号", value: 3422}],
      deviceList:[],
      ruleForm: {
        serviceRange: '',
        serviceType: '',
        projectId: '',
        serviceFee: '',
        relateDeviceType: '',
        serviceDescription: ''
      },
      fileList: [],
      fileLists:[],
      dialogImageUrl: '',
      dialogVisible: false,
      rules: {

        serviceRange: [
          { required: true, message: '请选择区域', trigger: 'change' }
        ],

        serviceType: [
          { required: true, message: '请选择故障类型', trigger: 'change' }
        ],
        projectId: [
          { required: true, message: '请选择房屋编号', trigger: 'change' }
        ],
        relateDeviceType: [
          { required: true, message: '请选择故障设备', trigger: 'change' }
        ],
        serviceFee:  [
          { required: true, message: '请填写预估费用', trigger: 'blur' }
        ],
        serviceDescription: [
          { required: true, message: '请填写内容描述', trigger: 'blur' }
        ]
      }
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addRepair()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addRepair(){
      let data={
        serviceRange: this.ruleForm.serviceRange,
        serviceType: this.ruleForm.serviceType,
        projectId:  this.ruleForm.projectId,
        serviceFee:  this.ruleForm.serviceFee,
        relateDeviceType:  this.ruleForm.relateDeviceType,
        serviceDescription:  this.ruleForm.serviceDescription,
        file:this.fileLists
      }
      let formdata = new FormData()
      for (var key in data) {
        formdata.append(key, data[key])
      }
      this.fileLists.forEach(function (file) {
        // 因为要上传多个文件，所以需要遍历一下才行
        formdata.append('file', file);
      })
      api
          .addRepair(formdata)
          .then((res) => {
            console.log(res);
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.$router.push({path:'/repairList'})
          })
          .catch((err) => {console.log(err)});
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleChanged (raw) {
      this.fileLists.push(raw.file);
    },
    handleDeviceChanged(obj){
      console.log(obj)
      for(let i=0;i<this.deviceList.length;i++){
        if(this.deviceList[i].id==obj){
          this.ruleForm.serviceFee=this.deviceList[i].serviceFee
        }
      }
    },
    init(){
      this.getAreaList()
      this.getDeviceList()
      this.getHouseList()
    },
    //区域list
    getAreaList() {
      api
          .getAreaList()
          .then((res) => {
            console.log(res);
            this.areaList=res.data.data
          })
          .catch((err) => {console.log(err)});
    },
    //故障设备list
    getDeviceList() {
      api
          .getDeviceList()
          .then((res) => {
            console.log(res);
            this.deviceList=res.data.data
          })
          .catch((err) => {console.log(err)});
    },
    //关联房产编号list
    getHouseList() {
      api
          .getHouseList()
          .then((res) => {
            console.log(res);
            this.houseList=res.data.data
          })
          .catch((err) => {console.log(err)});
    },
  }
}
</script>

<style scoped>
.container{
  width: 800px;
  margin: 0 auto;
  min-height: 700px;
  margin-bottom: 30px;
}
.breadBox{
  margin-top: 40px;
}
.formBox{
  width: 640px;
  margin: 0 auto;
  margin-top: 40px;
  padding: 30px;
  box-shadow: 0 0 20px #ddd;
  border-radius: 8px;
}
.formBox>>>.el-select {

  width: 100%;
}
</style>